<template>
    <view>
        <view class="smart-page-head">
            <view class="smart-page-head-title">picker,选择列表</view>
        </view>
        <view class="smart-padding-wrap">
            <view class="uni-title">普通选择器</view>
            <view class="uni-list">
                <view class="uni-list-cell">
                    <view class="uni-list-cell-left">当前选择</view>
                    <view class="uni-list-cell-db">
                        <picker @change="bindPickerChange" :range="array" :value="index" range-key="name">
                            <view class="uni-input">{{ array[index].name }}</view>
                        </picker>
                    </view>
                </view>
            </view>
            <view class="uni-title uni-common-pl">日期选择器</view>
            <view class="uni-list">
                <view class="uni-list-cell">
                    <view class="uni-list-cell-left">当前选择</view>
                    <view class="uni-list-cell-db">
                        <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                            <view class="uni-input">{{ date }}</view>
                        </picker>
                    </view>
                </view>
            </view>
            <view class="uni-title uni-common-pl">时间选择器</view>
            <view class="uni-list">
                <view class="uni-list-cell">
                    <view class="uni-list-cell-left">当前选择</view>
                    <view class="uni-list-cell-db">
                        <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
                            <view class="uni-input">{{ time }}</view>
                        </picker>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
function getDate(type) {
    const date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (type === 'start') {
        year = year - 60;
    } else if (type === 'end') {
        year = year + 2;
    }
    month = month > 9 ? month : '0' + month;
    day = day > 9 ? day : '0' + day;
    return `${year}-${month}-${day}`;
}

export default {
    data() {
        return {
            array: [{ name: '中国' }, { name: '美国' }, { name: '日本' }, { name: '巴西' }],
            index: 0,
            date: getDate({
                format: true
            }),
            startDate: getDate('start'),
            endDate: getDate('end'),
            time: '12:01'
        };
    },
    methods: {
        bindPickerChange: function(e) {
            this.index = e.detail.value;
        },
        bindDateChange: function(e) {
            this.date = e.detail.value;
        },
        bindTimeChange: function(e) {
            this.time = e.detail.value;
        }
    }
};
</script>

<style>
.uni-title {
    font-size: 30rpx;
    font-weight: 500;
    padding: 20rpx 0;
    line-height: 1.5;
}
.uni-list {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.uni-list-cell {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #bebebe;
    border-bottom: 1px solid #bebebe;
}
.uni-list-cell-db,
.uni-list-cell-right {
    flex: 1;
}
.uni-list-cell-left {
    white-space: nowrap;
    font-size: 28rpx;
    padding: 0 30rpx;
}
.uni-input {
    height: 50rpx;
    padding: 15rpx 25rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    background: #fff;
    flex: 1;
}
</style>